<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>更新时的一个问题</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>人员列表</h2>
      <button @click="updateMei">更新马冬梅信息</button>
      <ul>
        <!-- 遍历计算属性创建列表 -->
        <li v-for="(item,index) of persons" :key="item.id">
          {{item.name}}-{{item.age}}--{{item.sex}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          persons: [
            { id: "001", name: "马冬梅", age: "20", sex: "女" },
            { id: "002", name: "周冬雨", age: "32", sex: "女" },
            { id: "003", name: "周杰伦", age: "25", sex: "男" },
            { id: "004", name: "温兆伦", age: "19", sex: "男" },
          ],
        };
      },
      methods: {
        updateMei() {
          // this.persons[0].name = "马老师"; //奏效
          // this.persons[0].age = 50; //奏效
          // this.persons[0].sex = "男"; //奏效
          // this.persons[0] = { id: "001", name: "马老师", age: "50", sex: "男" }; //不奏效
          /* 原因：
          Vue不会数组中的元素添加getter和setter方法即persons[0]无getter和setter方法,
          当修改persons[0]时,Vue无法检测到因此也就无法更新页面 */
          /* 解决方法：
          1.调用数组的 push pop shift  unshift splice sort reverse方法
          vm.student.hobbys.push === Array.prototype.push false
          Vue对push等方法进行了包裹,增加了触发视图更新的功能
          2.使用Vue.set方法进行修改指定索引的元素 Vue.set(vm.student.hobbys,1,"打台球") 
          */
          this.persons.splice(0,1,{ id: "001", name: "马老师", age: "50", sex: "男" })
        },
      },
    });
  </script>
</html>
